import React, { Component } from 'react'
import echarts from 'echarts'
import axios from 'axios'
import _ from 'lodash'
export default class Echarts extends Component {
    echartdate=[]
    myChart=null
    componentDidMount() {
       
        axios.get("http://localhost:5000/flavoured").then(res=>{
            //数据处理
            this.dataFilter(res.data)
            //渲染echarts
            this.renderEachart()
        })
       
        window.onresize=()=>{
            this.myChart.resize()
        }
        
    }
    dataFilter=(data)=>{
        //console.log(data)
        let newdate=_.groupBy(data,"cooking")
        //console.log(Object.keys(newdate), Object.values(newdate))
        this.echartdate=newdate
    }
    renderEachart=()=>{
        
        let option = {
            tooltip: {},
            legend: {
                data:['3月销量','4月销量']
            },
            xAxis: {
                data: Object.keys(this.echartdate)
            },
            yAxis: {
                minInterval:1
            },
            series: [{
                name: '3月销量',
                type: 'bar',
                data: Object.values(this.echartdate).map(item=>item.length)
            }]
        };

       
            this.myChart = echarts.init(document.getElementById('main'))
            this.myChart.setOption(option)
       


    }
    render() {
        return (
            <div id="main" style={{height:'400px'}}></div>
        )
    }
}
